<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
  <style>
    .a{
      color: green;
    }
    .b{
      color: red;
    }
  </style>
</head>
<body>

<div id="app"></div>

  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">

    new Vue({
      el: '#app',
      template: `
            <div>
              补充知识点：
                1、v-for的使用中，除了item属性，也有一些辅助属性
                   students:数组:(item,index) in students
                      奇偶数不同样式
                      :class="index%2==0 ? 'red':'green'"

                   students:对象:(val,key,index) in students2

              <ul>
                <li v-for="item in students" :class="item.myClass">
                  {{ item.name }}
                </li>
              </ul>
              <hr/>
              <ul>
                <li v-for="(val,key,index) in students2">
                  value:{{val}}
                  key:{{key}}
                  index:{{index}}
                </li>
              </ul>
            </div>
        `,
      data: function () {
        return {
          students: [{name:'张三',myClass:'a'},{name:'李四',myClass:'b'},{name:'王五',myClass:'a'}] ,
          students2: {'A':'张三','B':'李四','C':'王五'}
        }
      }
    });

  </script>

</body>
</html>
